<template>
	<view class="container">
		<view class="top-line"></view>
		<view class="top-bg"><image class="top-bottom-img" src="../../static/images/platform.png"></image></view>
		<view>
			<view class="no-container" v-if="giftRankList.length > 0" @click="servePlayerDetail(giftRankList[0].ServePlayerId)">
				<view class="header-border border-1"><image class="header-member" :src="giftRankList[0].ServePlayerImg"></image></view>
				<text class="header-name">{{ giftRankList[0].ServePlayerName }}</text>
				<view style="display: flex;align-items: center;">
					<image class="renqi-icon" src="../../static/images/hot.png"></image>
					<text>{{ giftRankList[0].FansCount }}</text>
				</view>
			</view>
		</view>
		<view class="no-container no2" v-if="giftRankList.length > 1" @click="servePlayerDetail(giftRankList[1].ServePlayerId)">
			<view class="header-border border-2"><image class="header-member" :src="giftRankList[1].ServePlayerImg"></image></view>

			<text class="header-name">{{ giftRankList[1].ServePlayerName }}</text>
			<view style="display: flex;align-items: center;">
				<image class="renqi-icon" src="../../static/images/hot.png"></image>
				<text>{{ giftRankList[1].FansCount }}</text>
			</view>
		</view>
		<view class="no-container no3" v-if="giftRankList.length > 2" @click="servePlayerDetail(giftRankList[2].ServePlayerId)">
			<view class="header-border border-3"><image class="header-member" :src="giftRankList[2].ServePlayerImg"></image></view>

			<text class="header-name">{{ giftRankList[2].ServePlayerName }}</text>
			<view style="display: flex;align-items: center;">
				<image class="renqi-icon" src="../../static/images/hot.png"></image>
				<text>{{ giftRankList[2].FansCount }}</text>
			</view>
		</view>
		<view class="gift-list-item" v-for="(item, index) in giftRankListSecond" :key="index" @click="servePlayerDetail(item.ServePlayerId)">
			<text class="gift-list-item-num">{{ index + 4 }}</text>
			<image class="gift-list-item-header" :src="item.ServePlayerImg"></image>
			<view class="person-info-container">
				<text>{{ item.ServePlayerName }}</text>
				<view class="dengji-container">
					<image class="gift-list-item-dengji" src="../../static/images/star.png"></image>
					<text>{{ item.Score }}</text>
				</view>
			</view>
			<view class="renqi-container">
				<text class="renqi-container-title">人气</text>
				<view style="display: flex;align-items: center;">
					<image class="renqi-icon" src="../../static/images/hot.png"></image>
					<text>{{ item.FansCount }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAppServePlayerBangDan } from '../../constant/customer.js';
import { isLogin, toLogin } from '../../config/common.js';
import { baseImageUrl } from '../../config/config.js';
export default {
	components: {},
	data() {
		return {
			baseImageUrl: baseImageUrl,
			giftRankList: [],
			giftRankListSecond: []
		};
	},
	onLoad: function(option) {
		this.getGiftRankList();
	},
	methods: {
		async getGiftRankList() {
			//获取贡献榜前10名
			let res = await getAppServePlayerBangDan();
			this.giftRankList = res;
			if (res.length > 3) {
				this.giftRankListSecond = res.slice(3);
			}
		},
		servePlayerDetail(item_id) {
			if (isLogin()) {
				uni.reLaunch({
					url: '/packagePages/index/kongjian/index?playerId=' + item_id
				});
			} else {
				toLogin();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: $main-page-color;
	height: 100vh;
	overflow-y: auto;
	padding-bottom: 40rpx;
	position: relative;
}

.top-bg {
	background-color: #fff;
	width: 710rpx;
	margin: 20rpx;
	height: 480rpx;
	border-radius: 20rpx;
	position: relative;
}

.top-bottom-img {
	width: 670rpx;
	left: 20rpx;
	position: absolute;
	bottom: 20rpx;
	height: 112rpx;
}

.header-bg {
	width: 100%;
}

.no-container {
	position: absolute;
	top: 60rpx;
	left: 280rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 28rpx;
	color: #000;
}

.no2 {
	top: 100rpx;
	left: 40rpx;
}

.no3 {
	top: 120rpx;
	left: 500rpx;
}

.header-name {
	margin-bottom: 10rpx;
	margin-top: 10rpx;
}

.header-border {
	width: 170rpx;
	height: 170rpx;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.header-member {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-left: 18rpx;
	margin-top: 14rpx;
}

.gift-list-item {
	display: flex;
	align-items: center;
	height: 120rpx;
	box-shadow: 10rpx 10rpx #f5f6fd;
	background-color: #fff;
	width: 710rpx;
	margin: 20rpx;
	border-radius: 20rpx;

	&-num {
		margin-left: 20rpx;
	}

	&-header {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		margin-left: 40rpx;
		margin-right: 20rpx;
	}

	&-dengji {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.renqi-container {
		margin-left: auto;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		&-title {
			font-size: 28rpx;
			color: #000;
		}
	}

	.person-info-container {
		display: flex;
		flex-direction: column;
		.dengji-container {
			display: flex;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
}

.border-1 {
	background-image: url('../../static/images/golden.png');
}

.border-2 {
	background-image: url('../../static/images/silvery.png');
}

.border-3 {
	background-image: url('../../static/images/Copper.png');
}

.renqi-icon {
	width: 32rpx;
	height: 38rpx;
	margin-right: 8rpx;
}
.top-line {
	background-color: $main-theme-color-green;
	width: 100%;
	height: 10rpx;
}
</style>
